<template>
  <view class="content">
    <view class="navbar">
		<view v-for="(item, index) in navList" :key="index" class="nav-item grey f-size" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
				{{ item.text }}
		</view>
	</view>
    <!-- 显示区域 -->
	<scroll-view class="list"  :style="{height: contentHeight + 'px'}" @scrolltolower="queryData(index)"  scroll-y="true"  v-for="(item, index) in navList" :key="index" v-if="tabCurrentIndex === index">
        <view class="contents">
            <view v-for="(im,i) in item.datalist" class="min">
                <view class="min-title">
                    <view class="grey f-size">客户名称</view>
                    <view class="f-weight">{{im.customerName}}</view>
                </view>
                
                <view class="f-size">上次开单时间：{{im.lastOrderTime}}</view>
                <view class="f-size">上次开单金额：￥{{im.lastOrderAmount}}</view>
                
            </view>
            <end-temp v-show="end"></end-temp>
        </view>
    </scroll-view>
  </view>
</template>

<script>
import { getScreen} from "../../service/auth";
import endTemp from "../../components/endTemp.vue";
import toptabs from "../../components/toptabs.vue";
import { summary,summaryDetail,UserSummary,UserSummaryDetail,customerAreaSummary,customerAreaSummaryDetail} from "../../service/api/untouched";
export default {
    name:'detail',
    components:{toptabs,endTemp},
    data() {
        return {
            days:'',
            customerKeyword:'',
            detail:'untouchedDisordered',
            UserId:'',
            AreaId:'',
            navList:[
                {text:'未拜未开',datalist:[]},
                {text:'未拜已开',datalist:[]},
                {text:'已拜已开',datalist:[]},
                {text:'已拜未开',datalist:[]},
            ],
            type:0,
            contentHeight:0,
			tabCurrentIndex: 0,
			ordered: 0,
			touched: 0,
            page:1,
            size:20,
            end:false
        }
    },
    onLoad(option){
        this.days=option.days
        this.customerKeyword=option.customerKeyword
        // 判断从哪进的
        this.type=option.type
    if (option.detail) {
        
        this.detail=option.detail
        if (this.detail==='untouchedDisordered') {
            // 未拜未开
            this.tabCurrentIndex=0
            this.touched=0
            this.ordered=0
        }else if(this.detail==='untouchedOrdered'){
            // 未拜已开
            this.tabCurrentIndex=1
            this.touched=0
            this.ordered=1
        }else if(this.detail==='touchedDisordered'){
            // 已拜未开
            this.tabCurrentIndex=3
            this.touched=1
            this.ordered=0
        }else if(this.detail==='touchedOrdered'){
            // 已拜已开
            this.tabCurrentIndex=2
            this.touched=1
            this.ordered=1
        }
        // 汇总详情
        this.summaryDetail(this.tabCurrentIndex)
    }
    if (option.AreaId) {
        this.AreaId=option.AreaId
        this.touched=0
        this.ordered=0
        this.customerAreaSummaryDetail(this.tabCurrentIndex)
    }
    if (option.UserId) {
        this.UserId=option.UserId
        this.touched=0
        this.ordered=0
        this.UserSummaryDetail(this.tabCurrentIndex)
    }
        console.log(option,'传递');
        
    },
    created() {
        const {width,height} = getScreen()
        this.contentHeight = height - (80 * width / 750)
       
    },
    methods: {
        changeTab(e) {
			this.tabCurrentIndex = e.target.current;
		},
        tabClick(index) {
			this.tabCurrentIndex = index;
            this.page=1
            this.end=false
            this.navList[index].datalist=[]
            if (index===0) {
            // 未拜未开
            this.touched=0
            this.ordered=0
        }else if(index===1){
            // 未拜已开
            this.touched=0
            this.ordered=1
        }else if(index===3){
            // 已拜未开
            this.touched=1
            this.ordered=0
        }else if(index===2){
            // 已拜已开
            this.touched=1
            this.ordered=1
        }
        if (this.type==='1') {
                this.summaryDetail(this.tabCurrentIndex)
            }else if(this.type==='2'){
                this.customerAreaSummaryDetail(this.tabCurrentIndex)
            }else if(this.type==='3'){
                this.UserSummaryDetail(this.tabCurrentIndex)
            }
		},
        // 汇总
        summaryDetail(i){
            const data={
            page:this.page,
            size:this.size,
            days:this.days,
            customerKeyword:this.customerKeyword,
            touched:this.touched,
            ordered:this.ordered
        }
        summaryDetail(data).then(res=>{
            if (res.data.content.length<this.size) 
                this.end=true
            this.navList[i].datalist=this.navList[i].datalist.concat(res.data.content)
        })
        },
        // 区域
        customerAreaSummaryDetail(i){
            const data={
            page:this.page,
            size:this.size,
            days:this.days,
            customerAreaId:this.AreaId,
            customerKeyword:this.customerKeyword,
            touched:this.touched,
            ordered:this.ordered
        }
        customerAreaSummaryDetail(data).then(res=>{
            if (res.data.content.length<this.size) 
                this.end=true
            this.navList[i].datalist=this.navList[i].datalist.concat(res.data.content)
        })
        },
        // 业务员
        UserSummaryDetail(i){
            const data={
            page:this.page,
            size:this.size,
            days:this.days,
            userId:this.UserId,
            customerKeyword:this.customerKeyword,
            touched:this.touched,
            ordered:this.ordered
        }
        UserSummaryDetail(data).then(res=>{
            if (res.data.content.length<this.size) 
                this.end=true
            this.navList[i].datalist=this.navList[i].datalist.concat(res.data.content)
        })
        },
        queryData(){
            if(this.end)return
            this.page++
            if (this.type==='1') {
                this.summaryDetail(this.tabCurrentIndex)
            }else if(this.type==='2'){
                this.customerAreaSummaryDetail(this.tabCurrentIndex)
            }else if(this.type==='3'){
                this.UserSummaryDetail(this.tabCurrentIndex)
            }
        }
    },

}
</script>

<style scoped lang="scss">
.content {
	background: #f6f7f7;
	height: 100%;
	.list{
		.contents{
            background: #f6f7f7;
            padding: 10rpx;
            .min{
                padding: 15rpx;
                margin-bottom: 10rpx;
                background: white;
                border-radius: 10rpx;
                .min-title{
                    padding-bottom: 20rpx;
                    margin-bottom: 10rpx;
                    border-bottom: 1rpx solid #f1f1f1;
                }
            }
        }
	}
}
.f-size{
    font-size: 26rpx;
}
.f-weight{
    font-weight: 600;
}
.navbar {
	display: flex;
	height: 40px;
	padding: 0 5px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 10;
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		// font-size: 15px;
		// color: red;
		position: relative;
		&.current {
			color: #0596fd;
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 44px;
				height: 0;
				border-bottom: 2px solid #0596fd;
			}
		}
	}
}
</style>